// # 登录对话框-显示
var loginBtn=document.querySelector('header .member > div')
var loginDialog=document.querySelector('section.login')
var loginCloseBtn=document.querySelector('section.login i.icon-close')

loginBtn.onclick=function(){ loginDialog.style.visibility = 'visible' }
loginCloseBtn.onclick=function(){ loginDialog.style.visibility='hidden' }

var loginBlueBox=document.querySelector('section.login .menu')
    
loginBlueBox.onmousedown=function(evt){
    var oldE= evt || window.event
    document.onmousemove=function(evt){
        var e= evt || window.event
        var left=e.clientX-oldE.offsetX
        var top =e.clientY-oldE.offsetY
        if(left<0) left=0
        if (top<0) top =0
        var loginDialog=document.querySelector('section.login .item')
        var maxLeft=(window.innerWidth || document.documentElement.clientWidth)-loginDialog.offsetWidth
        var maxTop=(window.innerHeight || document.documentElement.clientHeight)-loginDialog.offsetHeight
        if(left>maxLeft) left=maxLeft
        if(top>maxTop) top=maxTop
        loginDialog.style.position='absolute'
        loginDialog.style.left=left+'px'
        loginDialog.style.top=top+'px'
    }
}
loginBlueBox.onmouseup=function(){ document.onmousemove=null }

// # 登录倒计时（留心：重复点击BUG  disabled属性
var num=5
var loginCaptchaBtn=document.querySelector('section.login .captcha')  //或缺安正码按钮
loginCaptchaBtn.onclick=function(){
    var captchaObj=document.querySelector('section.captcha')     //图片验证框
        captchaObj.style.visibility='visible'    //图片验证出现
    document.querySelector('section.captcha i.icon-close').onclick=function(){   
        captchaObj.style.visibility='hidden'
    }
    var dragBtn=captchaObj.querySelector('.drag .btn')    //图片验证球球拖拽
    dragBtn.onmousedown=function(){
        document.onmousemove=function(evt){
        var e= evt || window.event
        //TODO:left括号里面要结合css captcha定位理解
        var left=e.clientX- (captchaObj.offsetLeft - captchaObj.offsetWidth/2) - dragBtn.offsetWidth//鼠标位置
        console.log(e.clientX)
        // console.log(captchaObj.offsetLeft - captchaObj.offsetWidth/2)
        console.log(captchaObj.offsetLeft)
        dragBtn.style.left=left+'px'
        captchaObj.querySelector('.check img:nth-of-type(2)').style.left=left+'px'
        }
        document.onmouseup=function(){  //鼠标松开
            document.onmousemove=null
            var value=parseInt(dragBtn.style.left)  //行为验证结果
            if(value>=260 && value<=265){
                captchaObj.style.visibility='hidden'    //同时隐藏图片验证框
                loginCaptchaBtn.innerText=num+'秒后可重新获取'   //验证成功后，立马出现倒计时
                loginCaptchaBtn.disabled=true  //重复点击BUG  disabled属性
                //a:定义全局变量,b:上一步使用全局变量,c:允许按钮点击,d:定时器继续重置&判断
                t=setInterval(function(){
                    if(num<1) {
                        clearInterval(t)
                        loginCaptchaBtn.innerText='重新获取'
                        num=5    //将全局变量num恢复为5秒
                        loginCaptchaBtn.disabled=false   //解除disabled
                        return   //TODO:终止
                    }
                    num--
                    loginCaptchaBtn.innerText=num+'秒后可重新获取'  //1后倒计时出版并减1秒
                },1000)
            }
            //只要放下鼠标就返回原点
            dragBtn.style.left='0px'
            captchaObj.querySelector('.check img:nth-of-type(2)').style.left='0px'
        }
    }
    return  //这时解除点击登录事件，否则一直处在点击登录事件内，可能会触发一些不必要的bug
}
// # 登录表单验证
var loginSubmitBtn=document.querySelector('section.login .submit')
loginSubmitBtn.onclick=function(){
    var isOk=0
    var mobileObj=document.querySelector('.mobile')  //手机号验证
    if(mobileObj.value=='' || mobileObj.value.length !=11 || !Number(mobileObj.value)){
        document.querySelector('section.login .form>p:nth-of-type(3)').innerText='请输入正确的手机号'
    }else{
        isOk++
        document.querySelector('section.login .form>p:nth-of-type(3)').innerText=''
    }
    var passwordObj=document.querySelector('.password')
    if(passwordObj.value=='' ||passwordObj.value.length !=4 || !Number(passwordObj.value)){
        document.querySelector('section.login .form>p:nth-of-type(4)').innerText='请输入正确的验证码'
    }else{
        isOk++
        document.querySelector('section.login .form>p:nth-of-type(4)').innerText=''
    }
    if(isOk===2)  alert('登录成功')  //都验证成功 
}
